<template>

  <div v-if="quData && quData.id" :class="{'sub-box': sub}" class="qu-box">

    <div class="score-bar">

      <div style="flex-grow: 1">{{ quData.quType_dictText }} （本题分值：{{ quData.score }}分）</div>

      <div class="mark">
        <el-tooltip v-if="mark" :content="quData.mark?'取消本题的疑难标记':'为本题添加疑难标记'" effect="dark" placement="bottom">
          <i :class="{ 'el-icon-s-flag': true, 'active': quData.mark}" style="cursor: pointer" @click="markQu()" />
        </el-tooltip>
      </div>
    </div>

    <div class="qu-item">
      <div :class="sub?'sub':'num'">{{ quData.sort }}</div>
      <div class="content">
        <div v-html="$options.filters.formatRichText(quData.content)" />
      </div>
    </div>

    <!-- 单选多选判断 -->
    <div v-if="quData.quType==='1' || quData.quType==='2' || quData.quType==='3'" class="qu-answer">
      <div
        v-for="item in quData.answerList"
        :key="item.id"
        :class="{'active':item.checked}"
        class="item"
        @click="handleItemClick(item)"
      >
        <div class="tag">{{ item.abc }}</div>
        <div class="content">
          <div >{{ item.content }}</div>
          <div v-if="item.image">
            <img :src="item.image">
          </div>
        </div>
      </div>
    </div>

    <!-- 主观题 -->
    <div v-if="quData.quType === '4'">
      <div class="as-box">
        <Tinymce ref="tinymce" :paste="false" :id="quData.id" v-model="quData.answer" style="width: 100%" />
      </div>
    </div>

    <!-- 填空题 -->
    <div v-if="quData.quType==='5'" class="qu-answer">
      <div v-for="item in quData.answerList" :key="item.id" class="item">
        <div class="content">
          <el-input v-model="item.answer" />
        </div>
      </div>
    </div>

    <!-- 组合题引用自己 -->
    <div v-if="quData.quType==='99'">
      <div v-for="sub in quData.subList" :key="sub.id">
        <qu-item-exam :key="sub.id" :value="sub" :sub="true" />
      </div>
    </div>

    <div v-if="sub" class="split" />

  </div>

</template>

<script>

import Record from '@/components/Recorder'
import Tinymce from '@/components/Tinymce'
export default {
  name: 'QuItemExam',
  components: { Tinymce, Record },
  props: {
    value: {
      type: Object,
      default: function() {
        return {}
      }
    },
    mark: {
      type: Boolean,
      default: function() {
        return true
      }
    },
    sub: {
      type: Boolean,
      default: function() {
        return false
      }
    }
  },

  data() {
    return {
      context: null,
      drawWidth: 0,
      contentWidth: 0,
      lastDot: { },
      linkIds: [],
      linkData: [],
      // 当前试题内容
      quData: {
        quType: '',
        answer: '',
        answerList: []
      }
    }
  },

  watch: {
    // 检测查询变化
    value: {
      handler(val) {
        this.fillData(val)
      }
    },
    quData: {
      handler() {
        if (this.quData && this.quData.id) {
          this.$emit('fill', this.quData)
        }
      },
      deep: true
    }
  },

  created() {
    this.fillData(this.value)
  },

  methods: {

    // 填充数据
    fillData(data) {
      if (!data) {
        return
      }

      this.quData = data

      if (data.quType === '4' && this.$refs.tinymce) {
        this.$refs.tinymce.setContent(data.answer || '')
      }
    },

    // 选定值
    handleItemClick(item) {
      item.checked = !item.checked

      // 单选要清理其它数据
      if (this.quData.quType === '1' || this.quData.quType === '3') {
        this.quData.answerList.forEach(function(qu) {
          console.log(qu)
          if (item.id !== qu.id) {
            qu.checked = false
          }
        })
      }
    },

    // 处理
    markQu() {
      this.quData.mark = !this.quData.mark
    }
  }
}
</script>
